<template>
  <div>
    <a-modal v-model="modalVisible" title="重复版本号提醒" @ok="updataSofware">
      <a-alert message="该版本号已存在，是否覆盖？" banner />
    </a-modal>
    <my-form-drawer :title="title" :width="500" :visible="visible" @ok="edit" @cancel="onClose" >
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="上传升级包">
          <a-upload name="file" :multiple="true" :before-upload="beforeUpload" action="/ledWeb/file/upload" :headers="headers" @change="handleChange">
            <a-button class="nbcs-btn nbcs-btn-primary position-r"> <a-icon :type="uploading ? 'loading' : 'upload'" />上传zip包</a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="升级包名" prop="fileName">
          <a-input v-model.trim="form.fileName" disabled />
        </a-form-model-item>
        <a-form-model-item label="文件大小" prop="fileSize">
          <a-input v-model="form.fileSize" disabled />
        </a-form-model-item>
        <a-form-model-item label="文件地址" prop="fileUrl">
          <a-input-number v-model="form.fileUrl" disabled />
        </a-form-model-item>
        <a-form-model-item label="版本号" prop="fileVersion">
          <a-input v-model="form.fileVersion" />
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
    
  </div>

  

</template>

<script>
import moment from 'moment';
import { find, add } from '@/services/software';
import { limitNumber } from '@/utils/common';
import MyFormDrawer from '@/components/drawer/MyFormDrawer';
import { cardList } from '@/services/device';
import {rule} from "@/utils/validateRules"
// import {rule} from "@/utils/validateRules"
export default {
  name: 'DeviceForm',
  components: { MyFormDrawer },
  data() {
    return {
      title: '',
      treeValue: undefined,
      uploading: false,
      modalVisible:false,
      orgTree: [],
      form: {
        fileName: '',
        fileSize: '',
        fileUrl: '',
        fileVersion: '',
      },
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      type: 0,
      cardArr: [],
      cardTypeArr: [],
      typeArr: [],
      visible: false,
      rules: {
        fileName: [{ required: true, message: '升级包名不能为空', trigger: 'blur' }],
        fileSize: [{ required: true, message: '文件大小不能为空', trigger: 'blur' }],
        fileUrl: [{ required: true, message: '文件地址不能为空', trigger: 'blur' }],
        fileVersion: [{ required: true, message: '版本号不能为空', validator:rule.checkSpace,trigger: 'blur' }],
      },
      deviceTag: [],
    };
  },
  computed: {},
  created() {
    // 获取品牌
    this.getCardList();
    this.getOrgAll();
  },

  methods: {
    moment,
    getCardList() {
      cardList().then((res) => {
        if (res.data.code == 0) {
          this.cardArr = res.data.data;
          console.log(this.cardArr);
        }
      });
    },
    cardSelectChange(value) {
      this.cardTypeArr = this.cardArr.filter((item) => item.brandName == value)[0].typeList;
    },
    changeForm(state, action, data) {
      this.treeValue = undefined;
      this.visible = state;
      this.type = action;
      this.title = this.type ? '编辑升级包' : '新增升级包';
      if (this.type) {
        console.log(data);
        this.treeValue = data.orgId;
        this.form = Object.assign(this.form, data);
        console.log(this.form);
        let typeArr = this.cardArr.map((item) => item.typeList);
        let arr = typeArr.reduce((pre, cur) => {
          return pre.concat(cur);
        }, []);
        this.form.brand = arr.filter((item) => item.id == this.form.cardId)[0]['brandName'];
        this.cardTypeArr = this.cardArr.filter((item) => item.brandName == this.form.brand)[0].typeList;
      }
    },

    beforeUpload(file) {
      console.log(file.type);
      this.form.fileName = file.name;
      const fileFamart = file.name.split('.')[file.name.split('.').length - 1];
      if (fileFamart != 'zip') {
        this.$message.error('当前上传文件格式错误，请选择zip格式进行上传');
        return false;
      }
      return true;
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.uploading = true;
        this.$message.loading('文件上传中，保持在当前页面，请勿进行操作');
      }
      if (info.file.status === 'done' && info.file.response.code == 0) {
        this.$message.success(`${info.file.name} 上传成功`);
        this.uploading = false;
        this.form.fileSize = info.file.size;
        this.form.fileUrl = info.file.response.data.url;
      } else if (info.file.status === 'error') {
        this.uploading = false;
        this.$message.error(`${info.file.name} 上传失败`);
      }
    },
    initData() {
      this.form = {
        fileName: '',
        fileSize: '',
        fileUrl: '',
        fileVersion: '',
      };
    },
    onClose() {
      this.visible = false;
      this.$refs['form'].clearValidate();
      this.initData();
    },
    selectChange(value) {
      this.form.orgId = value;
      this.treeValue = value;
    },
    limit(value) {
      return limitNumber(value);
    },
    edit() {
      find({ fileVersion: this.form.fileVersion }).then((res) => {
        if (res.data.data === true) {
          this.modalVisible = true
        }else{
          this.updataSofware()
        }
      });
    },
    updataSofware(){
      this.modalVisible = false
      this.$refs.form.validate((valid) => {
            if (!valid) {
              return false;
            }
            console.log(this.form);
            //编辑
            if (this.type) {
              // update(this.form).then((res) => {
              //   if (res.data.code === 0) {
              //     this.$message.success('修改成功');
              //     this.onClose();
              //     this.$emit('getList');
              //   }
              // });
            }
            //添加
            else {
              add(this.form).then((res) => {
                if (res.data.code === 0) {
                  this.$message.success('添加成功');
                  this.onClose();
                  this.$emit('getList');
                }
              });
            }
          });
    }
  },
};
</script>

<style lang="less" scoped></style>
